<template>
    <div>
        <Card>
            <el-form :model="queryForm">
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="managecom" label="">
                            <el-select v-model="queryForm.managecom" clearable  placeholder="管理机构" class="ibput">
                                <el-option v-for="(item,index) in organizationList" :label="item.manageCom" :value="item.companyCode" :key="index">
                                {{item.manageCom}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <div style="display: inline-block;">
                                <el-button type="primary" size="mini" @click="submit">查询
                                </el-button>
                                <el-button type="info" plain size="mini" @click="reset">重置
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </Card>
        <Card style="margin-top: 20px;">
            <el-table :data="tableList">
                <el-table-column  label="分公司" prop="secondManageName" align="center" width="180" />
                <el-table-column  label="支公司" prop="threeManageName" align="center" width="180"/>
                <el-table-column label="个险分单模式" align="center">
                    <el-table-column width="120" label="二次" prop="twoPiam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.twoPiam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" label="三次" prop="threePiam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.threePiam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" label="四次及以上" prop="fourPiam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.fourPiam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" label="大额单" prop="largePiam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.largePiam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" label="高难度件" prop="difficultPiam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.difficultPiam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="银保分单模式" align="center">
                    <el-table-column width="120" label="二次" prop="twoYbam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.twoYbam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" label="三次" prop="threeYbam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.threeYbam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" label="四次及以上" prop="fourYbam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.fourYbam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" label="大额单" prop="largeYbam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.largeYbam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" label="高难度件" prop="difficultYbam" align="center">
                        <template slot-scope="scoped">
                            <el-select v-model="scoped.row.difficultYbam">
                                <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value">
                                {{ item.label }}
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column width="120" label="操作" align="center" fixed="right">
                    <template slot-scope="{ row }">
                        <span @click="ok(row)" class="ok">确定</span>                    
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="tableList.length" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize" @pagination="getList" />
        </Card>
    </div>
</template>

<script>
import { getCompanyList,getQueryConfigist,getSaveConfigist } from '../../../api/renewalPlatformApi/index';

export default {
    name:'splitMode',
    data(){
        return{
            queryForm:{managecom:''},
            tableList:[],
            organizationList:[],
            list:[
                {label:'地图分单',value:'1'},
                {label:'督导关系分单',value:'2'}
            ]
        }
    },
    created(){ 
        this.getList() 
    },
    methods: {
        // 获得管理机构
        getList() {
            getCompanyList({ companyType: '2' }).then((res) => {
                if (res.code === 200) {
                    res.data.forEach(item => {
                        let temp = {
                        companyCode: item.companyCode,
                        companyName: item.companyName,
                        placeCode: item.placeCode,
                        isShowSon: false,
                        checked: [],
                        cityList: [],
                        manageCom: item.companyCode + '-' + item.companyName,
                        }
                        this.organizationList.push(temp);
                    });
                }
            }).finally(() => {})
        },
        submit(){
            // if(this.queryForm.managecom == ""){
            //     this.$message.error("请先选择机构！")
            // }else{
            //     this.getDatalist()
            // }
                this.getDatalist()

        },
        reset(){
            this.queryForm.managecom = ""
        },
        ok(row){
            console.log(row,"okokokokokokokokok")
            let list = {...row}
            getSaveConfigist(list).then(res=>{
                if(res.code == 200){
                    this.$message.success("成功")
                }else{
                    this.$message.error("失败")
                }
            })
        },
        // 查询列表接口
        getDatalist(){
            let obj = {
                manageCode: this.queryForm.managecom
            }
            getQueryConfigist(obj).then( res =>{
                if(res.code == 200){
                    this.tableList = res.data.list
                }else{
                    this.tableList = []
                }
            })
        },        
    }

}
</script>

<style scoped>
.ok{
    color:blue;
    cursor: pointer;
}
.el-select{
    width: 100%;
}
</style>